<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--引入vue相应文件-->
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../elementUI/index.js"></script>
    <!-- 引入docs样式 -->
    <link rel="stylesheet" href="../css/docs.css">
    <!-- 引入博客样式 -->
    <link rel="stylesheet" href="../commonCSS/blog.css">
</head>

<body>
    <div id="app" style="margin:50px;">


        <h1>Radio 单选框</h1>
        <p>在一组备选项中进行单选</p>

        <h2>基础用法</h2>
        <p>由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。</p>
        <p>要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-radio v-model="radio" label="1">备选项1</el-radio>
                <el-radio v-model="radio" label="2">备选项2</el-radio>
              </template>
        </div>
        <br/>
        <br/>



        <h2>禁用状态</h2>
        <p>单选框不可用的状态。</p>
        <p>只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-radio disabled v-model="radio2" label="禁用">备选项1</el-radio>
                <el-radio disabled v-model="radio2" label="选中且禁用">备选项2</el-radio>
              </template>
        </div>
        <br/>
        <br/>



        <h2>单选框组</h2>
        <p>适用于在多个互斥的选项中选择的场景</p>
        <p>结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可， 无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。
        </p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-radio-group v-model="radio3">
                  <el-radio :label="3">备选项</el-radio>
                  <el-radio :label="6">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                </el-radio-group>
            </template>
        </div>
        <br/>
        <br/>



        <h2>按钮样式</h2>
        <p>按钮样式的单选组合。</p>
        <p>只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <div>
                  <el-radio-group v-model="radio4_1">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-top: 20px">
                  <el-radio-group v-model="radio4_2" size="medium">
                    <el-radio-button label="上海" ></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-top: 20px">
                  <el-radio-group v-model="radio4_3" size="small">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京" disabled ></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                  </el-radio-group>
                </div>
                <div style="margin-top: 20px">
                  <el-radio-group v-model="radio4_4" disabled size="mini">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                  </el-radio-group>
                </div>
              </template>
        </div>
        <br/>
        <br/>

        <h2>带有边框</h2>
        <p>设置border属性可以渲染为带有边框的单选框。</p>
        <p></p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <div>
                  <el-radio v-model="radio5_1" label="1" border>备选项1</el-radio>
                  <el-radio v-model="radio5_1" label="2" border>备选项2</el-radio>
                </div>
                <div style="margin-top: 20px">
                  <el-radio v-model="radio5_2" label="1" border size="medium">备选项1</el-radio>
                  <el-radio v-model="radio5_2" label="2" border size="medium">备选项2</el-radio>
                </div>
                <div style="margin-top: 20px">
                  <el-radio-group v-model="radio5_3" size="small">
                    <el-radio label="1" border>备选项1</el-radio>
                    <el-radio label="2" border disabled>备选项2</el-radio>
                  </el-radio-group>
                </div>
                <div style="margin-top: 20px">
                  <el-radio-group v-model="radio5_4" size="mini" disabled>
                    <el-radio label="1" border>备选项1</el-radio>
                    <el-radio label="2" border>备选项2</el-radio>
                  </el-radio-group>
                </div>
              </template>
        </div>
        <br/>
        <br/>

        <h2>总结</h2>
        <p>label里面的值是个集合，v-model="radio"，radio的值和那个label相等，哪个label就是选中状态</p>
        <p></p>
        <br/>
        <br/>

        <h2>el-radio属性/Radio Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>Radio 的 value</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>border</td>
                    <td>是否显示边框</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>Radio 的尺寸，仅在 border 为真时有效</td>
                    <td>string</td>
                    <td>medium / small / mini</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>原生 name 属性</td>
                    <td>string</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
            </tbody>
        </table>

        <h2>Radio Events</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>回调参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>绑定值变化时触发的事件</td>
                    <td>选中的 Radio label 值</td>
                </tr>
            </tbody>
        </table>


        <h2>Radio-group Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效</td>
                    <td>string</td>
                    <td>medium / small / mini</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>text-color</td>
                    <td>按钮形式的 Radio 激活时的文本颜色</td>
                    <td>string</td>
                    <td>—</td>
                    <td>#ffffff</td>
                </tr>
                <tr>
                    <td>fill</td>
                    <td>按钮形式的 Radio 激活时的填充色和边框色</td>
                    <td>string</td>
                    <td>—</td>
                    <td>#409EFF</td>
                </tr>
            </tbody>
        </table>

        <h2>Radio-group Events</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>回调参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>绑定值变化时触发的事件</td>
                    <td>选中的 Radio label 值</td>
                </tr>
            </tbody>
        </table>

        <h2>Radio-button Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>label</td>
                    <td>Radio 的 value</td>
                    <td>string / number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>原生 name 属性</td>
                    <td>string</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
            </tbody>
        </table>

        <br/>
        <br/>



    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                radio: '1',
                radio2: '选中且禁用',
                radio3: 3,
                radio4_1: '上海',
                radio4_2: '上海',
                radio4_3: '上海',
                radio4_4: '上海',
                radio5_1: '1',
                radio5_2: '1',
                radio5_3: '1',
                radio5_4: '1'
            }
        },
    });
</script>

</html>